<template>
  <el-main>
	<!-- 如果没显示滚动的小圆点则装回2.6.7旧版插件，新版插件已经把圆点组件分开了 -->
	<div class="wrapper">
		<swiper :options="swiperOption" v-if="showSwiper">
			<!-- slides -->
			<swiper-slide v-for="item of list" :key="item.id">
				<img class="swiper-img" :src="item.imgUrl" alt="">
			</swiper-slide>
		
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>	
	</div>
  </el-main>
</template>
<script>
export default{
	name:'HomeBanner',
	props: {
		list: Array
	},
	data () {
		return {
			swiperOption:{
				pagination: '.swiper-pagination',
			　　observer:true,//修改swiper自己或子元素时，自动初始化swiper 
			　　observeParents:true,//修改swiper的父元素时，自动初始化swiper 
			　　loop:true,
			　　autoplay: {
			　　　　delay: 5000,
			　　　　disableOnInteraction: false
				},
				autoplay:3000
			},
		}
	},
	computed: {
		showSwiper () {
			return this.list.length
		}
	}
}
// 更改轮播的样式时要使用>>>样式穿透
</script>
<style lang="stylus" scoped>
.banner
	width:100%;
	display:block;
	float:left;
	margin-bottom:6px;
.banner img
	width:100%;

.wrapper >>> .swiper-pagination-bullet-active {background: #fff!important;}
.wrapper{overflow:hidden;width:100%;height:0;padding-bottom:26.66%}
.swiper-img{width:100%;height:100%;}
</style>